@extends('admin::public.base')
<style>

</style>
@section('content')
<div class="layui-card">
    <div class="layui-header">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <a class="layui-btn" href="{{ route('admin.config.create') }}">添 加</a>
            <a class="layui-btn layui-btn-list" href="{{ route('admin.config.list') }}">列 表</a>
        </div>
    </div>
    <div class="layui-form">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                @foreach ($data as $key => $item)
                <li @if($id) @if($item->id==$id) class="layui-this" @endif @else @if($key==0) class="layui-this" @endif @endif>{{$item->name}}</li>
                @endforeach
            </ul>
            <div class="layui-tab-content" style="height: auto">
                @foreach ($data as $key => $items)
                    <div class="layui-tab-item @if($id) @if($items->id==$id)layui-show @endif @else @if($key==0) layui-show @endif @endif" >
                        <form method="post" enctype="multipart/form-data" id="form-{{$items->id}}">
                            {{csrf_field()}}
                            @foreach ($items->children as $val)
                                <div class="layui-form-item">
                                    <label class="layui-form-label">{{$val->title}}</label>
                                    <div class="layui-input-block">
                                        @if ($val->value_type=='text')
                                            <input type="text" class="layui-input" name="{{$val->name}}" data-id="{{$val->id}}" value="{{$val->value}}">
                                        @elseif($val->value_type=='number')
                                            <input type="number" class="layui-input" name="{{$val->name}}" data-id="{{$val->id}}" value="{{$val->value}}">
                                        @elseif($val->value_type=='password')
                                            <input type="password" class="layui-input" name="{{$val->name}}" data-id="{{$val->id}}" value="{{$val->value}}">
                                        @elseif($val->value_type=='date')
                                            <input type="text" class="layui-input date" name="{{$val->name}}" data-id="{{$val->id}}" value="{{$val->value}}">
                                        @elseif($val->value_type=='time')
                                            <input type="text" class="layui-input time" name="{{$val->name}}" data-id="{{$val->id}}" value="{{$val->value}}">
                                        @elseif($val->value_type=='datetime')
                                            <input type="text" class="layui-input datetime" name="{{$val->name}}" data-id="{{$val->id}}" value="{{$val->value}}">
                                        @elseif($val->value_type=='textarea'||$val->value_type=='array')
                                            <textarea name="{{$val->name}}" data-id="{{$val->id}}" class="layui-textarea">{{$val->value}}</textarea>
                                        @elseif($val->value_type=='switch')
                                            <input type="checkbox" name="{{$val->name}}" value="{{$val->value}}" @if ($val->value==2) checked @endif data-id="{{$val->id}}" lay-text="开启|禁用" lay-filter="switch" lay-skin="switch">
                                        @elseif($val->value_type=='radio')
                                            @foreach ($val->options as $item)
                                                <input type="radio" name="{{$val->name}}" @if($item->key==$val->value) checked @endif data-id="{{$val->id}}" value="{{$item->key}}" title="{{$item->value}}">
                                            @endforeach
                                        @elseif($val->value_type=='select')
                                            <select name="{{$val->name}}" data-id="{{$val->id}}">
                                                @foreach ($val->options as $item)
                                                    <option value="{{$item->key}}" @if($item->key==$val->value) selected @endif>{{$item->value}}</option>
                                                @endforeach
                                            </select>
                                        @elseif($val->value_type=='checkbox')
                                            @foreach ($val->options as $item)
                                                <input type="checkbox" value="{{$item->key}}" name="{{$val->name}}[]" title="{{$item->value}}" @if($item->key==$val->value) checked @endif data-id="{{$val->id}}" lay-skin="primary"/>
                                            @endforeach
                                        @elseif($val->value_type=='image')
                                            <div class="app-image-box">
                                                @if($val->value)
                                                <div class="box">
                                                    <input type="hidden" data-id="{{$val->id}}" name="{{$val->name}}" value="{{$val->value}}">
                                                    <img src="{{$val->value}}" alt="">
                                                    <em onclick="delImage(this)" title="删除">×</em>
                                                </div>
                                                @endif
                                            </div>
                                            <div class="app-btn-file"><input type="file" name="{{$val->name}}" accept="image/*" class="app-image"  onchange="imageCallBack(this,'{{$val->name}}')"/>
                                            <div class="app-btn-name"><p class="fa fa-folder-open-o"></p><h1>上传图片</h1></div></div>
                                        @elseif($val->value_type=='images')
                                            <div class="app-btn-file"><input type="file" accept="image/*" class="app-image" name="{{$val->name}}[]" multiple onchange="imagesCallBack(this,'{{$val->name}}')"/>
                                            <div class="app-btn-name"><p class="fa fa-folder-open-o"></p><h1>上传图片</h1></div></div>
                                            <div class="app-image-box">
                                                @foreach ($val->value as $item)
                                                    <div class="box" data-name="{{$val->name}}">
                                                        <input type="hidden" data-id="{{$val->id}}" name="{{$val->name}}[]" value="{{$item}}">
                                                        <img src="{{$item}}" alt="">
                                                        <em onclick="delImages(this)" title="删除">×</em>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @elseif($val->value_type=='ueditor')
                                            <textarea name="{{$val->name}}" class="layui-textarea ueditor">{{$val->value}}</textarea>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn" onclick="submitData({{$items->id}})">修 改</button>
                                </div>
                            </div>
                        </form>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script src="/static/common/plugins/kindeditor/kindeditor-all.js"></script>
<script src="/static/common/plugins/kindeditor/lang/zh-CN.js"></script>
<script src="/static/common/plugins/jquery/dist/jquery.gridly.js"></script>
<script>
    layui.use(['layer', 'form','laydate'], function () {
        var form = layui.form,
            laydate = layui.laydate,
            layer = layui.layer; //独立版的layer无需执行这一句
        var fileList = {};//多图文件库
        var fileBox = {};//单图文件库
        $('.app-image-box').viewer();//图片初始化预览
        //时间插件初始化
        $('.date').each(function(){
            laydate.render({
                elem: this,
                type: 'date', //默认，可不填
                theme: '#108cee',
                trigger: 'click'
            });
        })
        $('.time').each(function(){
            laydate.render({
                elem: this,
                type: 'time', //默认，可不填
                theme: '#108cee',
                trigger: 'click'
            });
        })
        $('.datetime').each(function(){
            laydate.render({
                elem: this,
                type: 'datetime', //默认，可不填
                theme: '#108cee',
                trigger: 'click'
            });
        })
        //富文本展示
        $('.ueditor').each(function(){
            window.editor = KindEditor.create(this, {
                height: '300px',
                width:'100%',
                themeType: 'default',
                allowPreviewEmoticons: false,
                allowImageUpload: true,
                allowFileManager: true,
                uploadJson: "{{ route('admin.editorUpload') }}",
                afterBlur: function(){ this.sync(); },
                afterUpload: function (url) {
                    this.sync();
                },
                items: [
                    'undo', 'redo','|','justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent','|',
                     'fontname', 'fontsize','forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat','|','image', 'multiimage',
                    'emoticons','link', 'unlink'
                ]
            });
        })
        //监听switch开关
		form.on('switch(switch)', function(data) {
			this.value = this.checked ? 2 : 1;
        });
        //删除单图
        window.delImage = function (obj) {
            var path = $(obj).parent().find('input').val();
            var id = $(obj).parent().find('input').attr('data-id');
            var name = $(obj).parent().find('input').attr('name');
            if(id==0){
                if(fileBox[name]){
                    fileBox[name] = "";
                }
                $(obj).parent().parent().next('.app-btn-file').find('input').val("");
                $(obj).parent().remove();
            }else{
                layer.confirm('您确认要删除该图片吗？',{ icon: 3, title: '温馨提示', skin: 'layui-skin'}, function(index){
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "{{route('admin.config.delImage')}}",
                        data: {
                            name:name,
                            path:path
                        },
                        success: function (data) {
                            if (data.code == 1) {
                                layer.msg(data.msg, {
                                    time: 2000
                                }, function () {
                                    $(obj).parent().remove();
                                })
                            } else {
                                layer.msg(data.msg);
                            }
                        },
                        error: function (data) {
                            layer.msg("服务器开小差啦");
                        }
                    });
                    layer.close(index);
                })
            }
        }
        //删除多图
        window.delImages = function (obj) {
            var path = $(obj).parent().find('input').val();
            var id = $(obj).parent().find('input').attr('data-id');
            var parentId = $(obj).parents('form').attr('id');
            var name = $(obj).parent().attr('data-name');
            if(!path){
                var src = $(obj).parent().find('img').attr('src');
                for (var i = 0; i < fileList[name].length; i++) {
                    if (src == fileList[name][i].path) {
                        fileList[name].splice(i, 1);
                    }
                }
                $(obj).parent().remove();
                return false;
            }else{
                layer.confirm('您确认要删除该图片吗？',{ icon: 3, title: '温馨提示', skin: 'layui-skin'}, function(index){
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "{{route('admin.config.delImage')}}",
                        data: {
                            name:name,
                            path:path
                        },
                        success: function (data) {
                            if (data.code == 1) {
                                layer.msg(data.msg, {
                                    time: 2000
                                }, function () {
                                    $(obj).parent().remove();
                                })
                            } else {
                                layer.msg(data.msg);
                            }
                        },
                        error: function (data) {
                            layer.msg("服务器开小差啦");
                        }
                    });
                    layer.close(index);
                })
            }
        }
        //单图片上传
        window.imageCallBack = function(obj,name){
            var file = obj.files[0];
            var path = window.uploadBack(file);
            file.path = path;
            fileBox[name] = file;
            var html = '<div class="box">';
            html += '<input type="hidden" name="'+name+'" data-id="0" value="'+path+'">';
            html += '<img src="'+path+'" title="'+file.name+'" />';
            html += '<em onclick="delImage(this)" title="删除">×</em></div>';
            $(obj).parent().prev('.app-image-box').html(html);
            $(obj).parent().prev('.app-image-box').viewer('update');
        }
        //多图片上传
        window.imagesCallBack = function(obj,name){
            var files = obj.files;
            if (files.length > 0) {
                var html = "";
                if(!fileList[name]){
                    fileList[name] = [];
                }
                for (var i = 0; i < files.length; i++) {
                    var path = window.uploadBack(files[i]);
                    html += '<div class="box" data-name="'+name+'">';
                    html += '<img src="' + path + '" alt="">';
                    html += '<em onclick="delImages(this)" title="删除">×</em>';
                    html += '</div>';
                    files[i].path = path;
                    fileList[name].push(files[i]);
                }
                $(obj).parent().parent().find('.app-image-box').append(html);
                $(obj).parent().parent().find('.app-image-box').viewer('update');
            }
        }
        window.submitData = function(id){
            var formData = new FormData($('#form-'+id)[0]);
            for(var i in fileList){
                if(fileList[i]){
                    formData.delete(i+"[]");
                    for(var j=0;j<fileList[i].length;j++){
                        formData.append(i+"[]",fileList[i][j]);
                    }
                }
            }
            for(var i in fileBox){
                if(!fileBox[i]){
                    formData.delete(i);
                }
            }
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{{route('admin.config.update')}}",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.code == 1) {
                        layer.msg(data.msg, {
                            time: 2000
                        }, function () {
                            location.href = "{{route('admin.config')}}?id="+id;
                        })
                    } else {
                        layer.msg(data.msg);
                    }
                },
                error: function (data) {
                    layer.msg("服务器开小差啦");
                }
            });
        }
    })
</script>
@endsection
